<template>	
	<div class="container">
		<form class="form-signin">
			<h2 class="form-signin-heading">运维管理平台</h2>
			<div class="login-wrap">
				<input type="text" class="form-control" v-model="username" placeholder="请输入用户名" required autofocus />
				<input type="password" class="form-control" v-model="password" placeholder="请输入密码" required autofocus />
				<div style="height: 30px;"></div>
				<button class="btn btn-lg btn-login btn-block" @click="login">登录</button>
				<div class="login-result"></div>
			</div>
		</form>
	</div>
</template>


<script>
	import axios from "axios"
	var CryptoJS = require("crypto-js")
	
    export default {
        name: 'Login',
        data() {
            return {
                username: '',
                password: '',
                remember: true
            }
        },

        methods: {
            login() {
				let username = document.querySelector('input[type="text"]')
				let password = document.querySelector('input[type="password"]')
				
				if (username === null || password === null) {
					return false
				}
								
				axios.post("http://api.xman.com:9090/restapi/login", {
					username: this.username, 
					password: CryptoJS.MD5(this.password).toString(),
				}).then((res)=>{
					console.log(res.data.token)
					console.log(res.data, typeof res.data)
					
					if (res.data.token === null){
						document.querySelector('input[type="text"]').value = ''
						document.querySelector('input[type="password"]').value = ''
						document.querySelector('.login-result').innerHTML = "登录失败!"
						return false
					}
					
					
					/*
					// 1.方式一: 存储到localStorage或者sessionStorage
					if (this.remember) {
						localStorage.setItem("token", res.data.token)
					} else {
						sessionStorage.setItem("token", res.data.token)
					}
					*/
				   
					// 方式2
					// console.log("store.state.remember:", this.$store.state.remember)
					// console.log("store.state.token:", this.$store.state.token)
					// console.log("store.state.token:", this.$store.getters.remember)
					// console.log("store.state.token:", this.$store.getters.token)
					// 基于vuex（store文件）存储token
					
					this.$store.commit("setToken", res.data.token)
					// console.log("store.getters.get_user_info:", this.$store.getters.get_user_info.username)
			
					// 登陆路由跳转
					let self = this;
					this.$success({
						title: '系统提示',
						content: '登陆成功！欢迎回来！',
						okText: '确定',
						onOk() {
							// 在这里，不能直接使用this，因为此处的this被重新赋值了，不再是原来的外界的vue对象了，而是一个antd-vue提供的对话框对象了
							self.$router.push('/')
						}
					})
				}).catch((err)=>{
					console.log("err:::",err)
				})
            },
			
        }

    }
</script>

<style scoped>
	.login-title{
		width: 200px;
		height: 200px;
	}
	
	.container {
	    width: 100%;
		height: 100vh;
		background-color: #F1F2F7;
	}
	
	.form-signin {
	    max-width: 330px;
	    margin: 100px auto 0;
	    background: #fff;
	    border-radius: 5px;
	    -webkit-border-radius: 5px;
	}
	
	.form-signin h2.form-signin-heading {
	    margin: 0;
	    padding: 20px 15px;
	    text-align: center;
	    background: #41cac0;
	    border-radius: 5px 5px 0 0;
	    -webkit-border-radius: 5px 5px 0 0;
	    color: #fff;
	    font-size: 18px;
	    text-transform: uppercase;
	    font-weight: 300;
	    font-family: 'Open Sans', sans-serif;
	}
	
	.login-wrap {
	    padding: 20px;
	}
	
	.form-signin input[type="text"] {
	    margin-bottom: 15px;
	    border-radius: 5px;
	    -webkit-border-radius: 5px;
	    border: 1px solid #eaeaea;
	    box-shadow: none;
	    font-size: 12px;
	}
	
	.form-signin input[type="password"] {
	    margin-bottom: 15px;
	    border-radius: 5px;
	    -webkit-border-radius: 5px;
	    border: 1px solid #eaeaea;
	    box-shadow: none;
	    font-size: 12px;
	}
	
	.form-signin .form-control {
	    position: relative;
	    font-size: 16px;
	    height: auto;
		width: 280px;
	    padding: 10px;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	}
	
	.form-signin .btn-login {
	    background: #f67a6e;
	    color: #fff;
	    text-transform: uppercase;
	    font-weight: 300;
	    font-family: 'Open Sans', sans-serif;
	    box-shadow: 0 4px #e56b60;
	    margin-bottom: 20px;
	}
	.btn-block {
	    display: block;
	    width: 100%;
	    padding-right: 0;
	    padding-left: 0;
	}
	.btn-lg {
	    padding: 10px 16px;
	    font-size: 18px;
	    line-height: 1.33;
	    border-radius: 6px;
	}
	.btn {
	    display: inline-block;
	    padding: 6px 12px;
	    margin-bottom: 0;
	    font-size: 14px;
	    font-weight: normal;
	    line-height: 1.428571429;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: middle;
	    cursor: pointer;
	    border: 1px solid transparent;
	    border-radius: 4px;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    -o-user-select: none;
	    user-select: none;
		width: 250px;
	}
	
	.login-result {
		color: red;
		font-size: 12px;
	}
</style>